<template>
  <div>
    <div class="back-btn">
      <span class="left iconfont icon-icon_left" @click="$router.back()"></span>
    </div>
    <div class="msg-top">
         <img :src="detal.imgs" alt="">
         <div class="book-msg">
          <b>{{detal.name}}</b>
          <p class="author">{{detal.author}}</p>
          <i class="iconfont icon-icon_star_fill star"></i>
           <i class="iconfont icon-icon_star_fill star"></i>
            <i class="iconfont icon-icon_star_fill star"></i>
             <i class="iconfont icon-icon_star_fill star"></i>
              <a>9.4分/60人评价</a>
          <p class="cate">都市/青春校园</p>
          <p class="num">266.3万字|连载</p>
         </div>
         <div class="btn">
           <button class="col">免费试读</button>
           <button :id="id" @click="Add()">加入书架</button>
           <button>VIP订阅</button>
         </div>
         <div class="msg-body">
            <a>{{detal.describe}}</a>
         </div>
         <div class="item">目录
           <span class="iconfont icon-icon_next_arrow mulu"></span>
         </div>
      </div>
  </div>
</template>

<script>
import $axios from 'axios'
export default {
  data () {
    return {
      id: '',
      detal: {}
    }
  },
  mounted () {
    this.id = this.$route.params.id
    // console.log(this.id)
    let that = this
    var url = '../static/json/book_list.json'
    $axios.get(url).then(res => {
      let datas = res.data
      that.detal = datas[this.id]
      // console.log(datas[this.id])
    })
  },
  methods: {
    Add () {
      var detal = this.detal
      var carbook = JSON.parse(window.localStorage.getItem('book') || '{}')
      carbook[detal.id] = {
        name: detal.name,
        imgs: detal.imgs,
        id: detal.id,
        author: detal.author,
        describe: detal.describe
      }
      window.localStorage.setItem('book', JSON.stringify(carbook))
      // console.log(carbook)
    }
  }
  // mutations: {
  //   addsh (state, bookinfo) {
  //     state.car.push(bookinfo)
  //   }
  // }
}
</script>
<style scoped>
.back-btn{
  width: 100%;
  height: 50px;
  background: #1296db;
}
.msg-top{
  position: relative;
  width: 100%;
  height: 300px;
}
.msg-top img{
  width: 30%;
  height: 150px;
  margin: 10px 17px;
}
.book-msg{
  position: absolute;
  left: 37%;
  top: 10px;
}
.msg-top div b{
 font-size: 20px;
    padding: 5px 0px;
}
.author{
   font-size: 18px;
   padding: 5px 0px;
}
.cate{
   font-size: 16px;
   padding: 10px 0px;
}
.num{
  font-size: 14px;
}
.star{
  color: orange;
  font-size: 16px;
}
.book-msg a{
  color: #8d8b8b;
  font-size: 14px;
  padding-left: 5px;
}
/* btn */
.btn{
  width: 100%;
  /* border: orange 1px solid; */
  display: flex;
  justify-content: center;
}
.btn button{
  border: 1px #8d8b8b solid;
  width: 100px;
  height: 35px;
  margin: 10px;
  background: white;
}
.col{
  background: #1296db !important;
  color: white;
  border: none !important ;
}
/* msg-body 书籍描述 */
.msg-body{
  width: 95%;
  height: 80px;
  margin: 0 auto;
  margin-top: 20px;
  border: 1px solid rgb(223, 223, 223);
  border-left: none;
  border-right: none;
  padding: 15px 0 0 7px ;
}
.msg-body a{
  line-height: 30px;
  font-size: 16px;
}
/* 目录 */
.item{
  width:95% ;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(223, 223, 223);
  line-height: 40px;
  padding-left: 7px;
}
.mulu{
  float: right;
  margin-right: 5%;
}
</style>
